<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.global.js"></script>
		<style>
			ul,li{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.tab{
				display: flex;
			}
			.tab-item{
				width: 140px;
				padding: 16px 0;
				text-align: center;
				border-bottom: 2px solid #495057;
				cursor: pointer;
				font-size: 18px;
			}
			.active{
				margin-bottom: -1px;
				border-color: #b02a37;
				color: #b02a37;
				font-weight: 700;
			}
			.tab-content{
				width: 300px;
				padding: 20px;
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul class="tab">
				<li class="tab-item"
					:class="{active:type=='login'}"
					@click="switchMenu('login')"
				>登陆</li>
				<li class="tab-item"
					:class="{active:type=='register'}"
					@click="switchMenu('register')"
				>注册</li>
			</ul>
			<div class="tab-content">
				<p class="row">
					<label for="uname">用户名：</label>
					<!-- 事件对象在实参中不写时，调用函数不能加()
						若参数只有事件对象，可以省略
						若参数	$event + parms=>1,$event 不能省略
					 -->
					<input type="text" id="uname" @keydown.enter="keyDown()">
				</p>
				<p class="row">
					<label for="upwd">密&nbsp;&nbsp;&nbsp;码：</label>
					<!-- 事件对象在实参中使用时，原生DOM事件对象为$event -->
					<input type="password" id="upwd" @keyup="KeyUp('password',$event)">
				</p>
				<p class="row">
					<button @click="submit">登录</button>
				</p>
			</div>
		</div>
		<script>
			Vue.createApp({
				// Vue实例的属性
				data(){
					return{
						type:'login'
					}
				},
				// Vue实例的方法，自定义函数写在method内部
				methods:{
					switchMenu(type){
						this.type = type
					},
					KeyUp(type,event){
						/* console.log(event.key,event.keyCode) */
						if(event.key=='Enter'){
							this.submit()
						}
					},
					keyDown(){
						console.log('你按下了回车键')
					},
					submit(){
						console.log('你提交了表单')
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>